<template>
  <view class="coupon-mall-container">
    <!-- 金币余额区域 -->
    <view class="coin-balance">
      <text class="coin-label">硬币余额</text>
      <text class="coin-amount">11</text>
      <text class="exchange-text">兑换好礼</text>
    </view>

    <!-- 我的优惠券模块 -->
    <view class="my-coupons">
      <view class="my-coupons-title">我的优惠券</view>
      <view class="my-coupons-list" v-if="myCouponList.length > 0">
        <view class="my-coupon-item" v-for="(item, index) in myCouponList" :key="item.id">
          <!-- 左侧金额区 -->
          <view class="my-coupon-left">
            <text class="my-amount-symbol">¥</text>
            <text class="my-amount-number">{{ item.coupon.amount }}</text>
          </view>
          <!-- 右侧详情区 -->
          <view class="my-coupon-right">
            <text class="my-coupon-name">满{{ item.coupon.minAmount }}减{{ item.coupon.amount }}</text>
            <text class="my-coupon-condition">满{{ item.coupon.minAmount }}元可用</text>
            <text class="my-coupon-expiry">领取时间: {{ formatTime(item.createTime) }}</text>
            <text class="my-coupon-status" v-if="item.status === 1">未使用</text>
            <text class="my-coupon-status used" v-else>已使用</text>
          </view>
          <!-- 右侧装饰线 -->
          <view class="coupon-divider"></view>
        </view>
      </view>
      <!-- 空状态提示 -->
      <view class="empty-coupon" v-else>
        <text>暂无优惠券，快去兑换吧~</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// 导入接口
import { getCoupons, getUserCoupons, exchangeCoupon } from '@/apis/userAPI';


// 响应式数据
const couponList = ref([]);
const myCouponList = ref([]); // 我的优惠券列表（接口数据）
const userId = ref(1); // 用户ID（实际项目从登录信息获取）

// 格式化时间
const formatTime = (timeString) => {
  if (!timeString) return '永久有效';
  const date = new Date(timeString);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};

// 获取用户优惠券列表
const fetchUserCoupons = async () => {
  try {
    const response = await getUserCoupons(userId.value);
    console.log('获取我的优惠券成功:', response);
    if (response.data.code === 200) {
      myCouponList.value = response.data.data || [];
    } else {
      uni.showToast({ title: '获取我的优惠券失败', icon: 'none' });
    }
  } catch (error) {
    console.error('获取我的优惠券出错:', error);
    uni.showToast({ title: '网络错误', icon: 'none' });
  }
};

// 页面加载时初始化数据
onMounted(async () => {
  await fetchUserCoupons(); // 先加载我的优惠券
  try {
    const response = await getCoupons();
    console.log('获取优惠券成功:', response);
    if (response.data.code === 200) {
      couponList.value = response.data.data || [];
    } else {
      uni.showToast({title: '获取优惠券失败', icon: 'none'});
    }
  } catch (error) {
    console.error('获取优惠券出错:', error);
    uni.showToast({title: '网络错误', icon: 'none'});
  }
});
</script>

<style lang="scss" scoped>
.coupon-mall-container {
  padding: 10rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 10rpx;
}

// 金币余额样式
.coin-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 15rpx;
  margin: 0 10rpx 20rpx;
  background-color: #fff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.03);

  .coin-label {
    font-size: 26rpx;
    color: #666;
  }

  .coin-amount {
    font-size: 30rpx;
    font-weight: bold;
    color: #FF7D00;
    margin: 0 10rpx;

    &::before {
      content: "💰";
      margin-right: 5rpx;
    }
  }

  .exchange-text {
    font-size: 24rpx;
    color: #333;
    padding: 5rpx 15rpx;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4rpx;
  }
}

// 我的优惠券样式
.my-coupons {
  margin: 0 10rpx 20rpx;

  .my-coupons-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
    color: #333;
  }

  .my-coupons-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15rpx;
  }

  .my-coupon-item {
    width: calc(50% - 8rpx);
    display: flex;
    background-color: #fff;
    border-radius: 12rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    position: relative;
  }

  .my-coupon-left {
    width: 90rpx;
    background-color: #FF7D00;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15rpx 0;

    .my-amount-symbol {
      font-size: 24rpx;
      line-height: 1;
    }

    .my-amount-number {
      font-size: 36rpx;
      font-weight: bold;
      line-height: 1;
    }
  }

  .my-coupon-right {
    flex: 1;
    padding: 15rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .my-coupon-name {
      font-size: 26rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 8rpx;
      line-height: 1.2;
    }

    .my-coupon-condition {
      font-size: 22rpx;
      color: #666;
      margin-bottom: 4rpx;
      line-height: 1.2;
    }

    .my-coupon-expiry {
      font-size: 20rpx;
      color: #999;
      line-height: 1.2;
    }

    .my-coupon-status {
      font-size: 20rpx;
      color: #00C853;
      margin-top: 5rpx;
      display: inline-block;
    }

    .my-coupon-status.used {
      color: #999;
    }
  }

  .coupon-divider {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 12rpx;
    background-image: radial-gradient(circle, transparent 50%, #f5f5f5 50%);
    background-size: 12rpx 12rpx;
    background-position: 0 center;
  }

  .empty-coupon {
    text-align: center;
    padding: 40rpx 0;
    color: #999;
    font-size: 24rpx;
  }
}

// 优惠券商城列表样式
.coupon-list {
  margin: 0 10rpx;

  .coupon-item {
    display: flex;
    align-items: flex-start;
    background-color: #fff;
    border-radius: 8rpx;
    margin-bottom: 15rpx;
    padding: 15rpx;
    box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.03);
  }

  .coupon-amount {
    width: 80rpx;
    text-align: center;
    margin-right: 15rpx;

    .amount-symbol {
      font-size: 24rpx;
      color: #FF7D00;
    }

    .amount-number {
      font-size: 36rpx;
      color: #FF7D00;
      font-weight: bold;
      display: block;
    }
  }

  .coupon-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .coupon-name {
      font-size: 26rpx;
      font-weight: bold;
      margin-bottom: 5rpx;
      color: #333;
    }

    .coupon-condition {
      font-size: 22rpx;
      color: #666;
      margin-bottom: 3rpx;
      line-height: 32rpx;
    }

    .coupon-expiry {
      font-size: 22rpx;
      color: #999;
      line-height: 30rpx;
    }
  }

  .coupon-get-btn {
    background-color: #FF7D00;
    color: #fff;
    font-size: 24rpx;
    padding: 10rpx 25rpx;
    border-radius: 6rpx;
    align-self: center;
    border: none;
  }
}
</style>